<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="backstage/common/head::head"></head>
<style>
    #content-container:before {
        background: none;
    }

    .lay-win {
        display: none;
    }
    #demo-nifty-settings {
        display: none !important;
    }
</style>
<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar" th:replace="backstage/common/header::header"></header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">
        <div id="content-container">
            <!--CONTENT CONTAINER-->
            <!--===================================================-->
            <div id="page-content">
                <button id="demo-btn-addrow" class="btn btn-purple" onclick="editDictionary(1,null)"><i
                        class="demo-pli-add"></i> 增加
                </button>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th style="width:50px;">
                            序号
                        </th>
                        <th>
                            字典名称
                        </th>
                        <th>
                            字典项
                        </th>
                        <th style="width:250px;">
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody id="dictionaty_tbody">
                    <!--<tr>
                        <td>1</td>
                        <td>a</td>
                        <td>index.html</td>
                        <td>
                            <button id="demo-btn-addrow" class="btn btn-info" onclick="editDictionary(0)"> 修改</button>
                            <button id="demo-btn-addrow" class="btn btn-danger"> 删除</button>
                        </td>
                    </tr>-->
                    </tbody>
                </table>

            </div>
        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->

        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <nav id="mainnav-container" th:replace="backstage/common/left::left(3)"></nav>
        <!--===================================================-->
        <!--END MAIN NAVIGATION-->

    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer" th:replace="backstage/common/foot::footer"></footer>

    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->
<div class="lay-win">
    <form class="form-horizontal">
        <div class="panel-body">
            <div class="form-group">
                <label class="col-sm-3 control-label" for="input_dictName">字典名称</label>
                <div class="col-sm-6">
                    <input type="text" placeholder="请输入字典名称" class="form-control input-sm" id="input_dictName">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="input_items">字典项</label>
                <div class="col-sm-6">
                    <input type="text" placeholder="请输入字典项（多个用 '，' 分割）" class="form-control" id="input_items">
                </div>
            </div>
        </div>
    </form>
</div>

</body>

<script>
    $(function () {
        dictionaryList(0, 20);
    })

    /**
     * 打开编辑窗口
     * type 0修改 1新增
     **/
    function editDictionary(type, id) {
        if (type == 0) {
            findDictById(id);
        }
        layui.use('layer', function () {
            layui.layer.open({
                type: 1,
                area: ['800px'],
                content: $('.lay-win'),
                btn: ['保存', '取消'],
                yes: function (){
                    if (type == 0) {
                        updateDictionary(id);
                    }else {
                        saveDictionary()
                    }
                }
            })
        })
    }

    //加载字典表格
    function dictionaryList(pageIndex, pageSize) {
        $.ajax({
            url: '/download/item/dictionaryList',
            type: 'get',
            data: {"pageIndex": pageIndex, "pageSize": pageSize},
            success: function (res) {
                var data = "";
                if (res != null) {
                    $.each(res.list, function (i, n) {
                        data += `<tr>
                            <td>${n.id}</td>
                            <td>${n.value}</td>`;
                        var items = n.items.join(",");
                        console.log(items)
                        /*$.each(n.items, function (i, item){
                            data += `<td>item.name</td>`;
                            });*/
                        data += `<td>${items}</td>`;
                        data += `<td>
                            <button id="demo-btn-addrow" class="btn btn-info" onclick="editDictionary(0,${n.id})"> 修改</button>
                            <button id="demo-btn-addrow" class="btn btn-danger" onclick="delDictionary(${n.id})"> 删除</button>
                            </td>
                            </tr>`;
                    });

                    $("#dictionaty_tbody").html(data)
                } else {
                    console.log(111)
                }
            }
        });
    }

    //添加字典项
    function saveDictionary() {
        var url = '/download/item/dictionaryAdd';
        var dictValue = $('#input_dictName').val();
        var items = $('#input_items').val().split('，');
        var data={"value": dictValue, "items": items};
        $.ajax({
            url: url,
            type: 'post',
            data: JSON.stringify(data),
            contentType: 'application/json',
            success: function (res) {
                location.href = "/backstage/dictionary";
            }
        });
    }

    //修改字典项
    function updateDictionary(id) {
        var url = '/download/item/dictionaryUpdate';
        var dictValue = $('#input_dictName').val();
        var items = $('#input_items').val().split('，');
        var data={"id":id,"value": dictValue, "items": items};
        console.log("updaate",data)
        $.ajax({
            url: url,
            type: 'post',
            data: JSON.stringify(data),
            contentType: 'application/json',
            success: function (res) {
                location.href = "/backstage/dictionary";
            }
        });
    }

    /**
     * 删除字典项
     * @param dictId 字典id
     */
    function delDictionary(dictId) {
        $.ajax({
            url: '/download/item/dictionaryDel',
            type: 'post',
            data: {"dicId": dictId},
            // contentType: 'application/json',
            success: function (res) {
                location.href = "/backstage/dictionary";
            }
        });
    }

    function findDictById(dictId) {
        $.ajax({
            url: '/download/item/findDictionaryById',
            type: 'post',
            data: {"dictId": dictId},
            // contentType: 'application/json',
            success: function (res) {
                console.log(res)
                $('#input_dictName').val(res.value);
                $('#input_items').val(res.items.join('，'));
            }
        });
    }


</script>

</html>